From ff9f3c108f954dfa382ab6623b5fa7bf4434a77a Mon Sep 17 00:00:00 2001 From: Matthias Clasen Date: Mon, 14 Dec 2015 16:10:54 -0500 Subject: [PATCH] Adwaita: Update color swatch styling The adjustments here are provisional and need an artistic eye. --- gtk/theme/Adwaita/_common.scss | 16 +++++++-------- gtk/theme/Adwaita/gtk-contained-dark.css | 25 +++++++++++++----------- gtk/theme/Adwaita/gtk-contained.css | 25 +++++++++++++----------- 3 files changed, 36 insertions(+), 30 deletions(-) diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss index 8de9e9c88f..76d3fd0bbf 100644 --- a/gtk/theme/Adwaita/_common.scss +++ b/gtk/theme/Adwaita/_common.scss @@ -3122,10 +3122,6 @@ colorswatch { transparentize(white, 1) 50%); box-shadow: inset 0 1px transparentize(white, 0.6), inset 0 -1px if($variant == 'light', transparentize(black, 0.9), transparentize(black, 0.6)); - &.dark overlay { // swatches with colors with luminosity lower than 50% get the dark class - background-image: linear-gradient(135deg, transparentize(white, 0.5), - transparentize(white, 1) 50%); - } } &:backdrop, &:backdrop:selected @@ -3136,22 +3132,26 @@ colorswatch { } // indicator and keynav outline colors - &.dark overlay { + &.dark { color: white; outline-color: transparentize(white, 0.5); + border: 1px solid if($variant == 'light', transparentize(black, 0.7), $borders_color); + &:hover { border-color: if($variant == 'light', transparentize(black, 0.5), black); } &:backdrop { color: transparentize(white, 0.7); } } - &.light overlay { + &.light { color: black; outline-color: transparentize(black, 0.5); + border: 1px solid if($variant == 'light', transparentize(black, 0.7), $borders_color); + &:hover { border-color: if($variant == 'light', transparentize(black, 0.5), black); } &:backdrop { color: transparentize(black, 0.7); } } // border color & overlay, & overlay:selected { - border: 1px solid if($variant == 'light', transparentize(black, 0.7), $borders_color); - &:hover { border-color: if($variant == 'light', transparentize(black, 0.5), black); } + background: none; + border: none; } // make the add color button looks like, well, a button diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css index 52ce6be18c..9668508d65 100644 --- a/gtk/theme/Adwaita/gtk-contained-dark.css +++ b/gtk/theme/Adwaita/gtk-contained-dark.css @@ -4327,26 +4327,29 @@ colorswatch { colorswatch.activatable:hover, colorswatch.activatable:hover:selected { background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 50%); box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), inset 0 -1px rgba(0, 0, 0, 0.4); } - colorswatch.activatable:hover.dark overlay, colorswatch.activatable:hover:selected.dark overlay { - background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 50%); } colorswatch:backdrop, colorswatch:backdrop:selected colorswatch.dark:backdrop, colorswatch.dark:backdrop:selected { background-image: none; box-shadow: none; } - colorswatch.dark overlay { + colorswatch.dark { color: white; - outline-color: rgba(255, 255, 255, 0.5); } - colorswatch.dark overlay:backdrop { + outline-color: rgba(255, 255, 255, 0.5); + border: 1px solid #1c1f1f; } + colorswatch.dark:hover { + border-color: black; } + colorswatch.dark:backdrop { color: rgba(255, 255, 255, 0.3); } - colorswatch.light overlay { + colorswatch.light { color: black; - outline-color: rgba(0, 0, 0, 0.5); } - colorswatch.light overlay:backdrop { - color: rgba(0, 0, 0, 0.3); } - colorswatch overlay, colorswatch overlay:selected { + outline-color: rgba(0, 0, 0, 0.5); border: 1px solid #1c1f1f; } - colorswatch overlay:hover, colorswatch overlay:selected:hover { + colorswatch.light:hover { border-color: black; } + colorswatch.light:backdrop { + color: rgba(0, 0, 0, 0.3); } + colorswatch overlay, colorswatch overlay:selected { + background: none; + border: none; } colorswatch#add-color-button { border-style: solid; border-width: 1px; diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css index ef83a14645..089c2d36f4 100644 --- a/gtk/theme/Adwaita/gtk-contained.css +++ b/gtk/theme/Adwaita/gtk-contained.css @@ -4499,26 +4499,29 @@ colorswatch { colorswatch.activatable:hover, colorswatch.activatable:hover:selected { background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 50%); box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), inset 0 -1px rgba(0, 0, 0, 0.1); } - colorswatch.activatable:hover.dark overlay, colorswatch.activatable:hover:selected.dark overlay { - background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 50%); } colorswatch:backdrop, colorswatch:backdrop:selected colorswatch.dark:backdrop, colorswatch.dark:backdrop:selected { background-image: none; box-shadow: none; } - colorswatch.dark overlay { + colorswatch.dark { color: white; - outline-color: rgba(255, 255, 255, 0.5); } - colorswatch.dark overlay:backdrop { + outline-color: rgba(255, 255, 255, 0.5); + border: 1px solid rgba(0, 0, 0, 0.3); } + colorswatch.dark:hover { + border-color: rgba(0, 0, 0, 0.5); } + colorswatch.dark:backdrop { color: rgba(255, 255, 255, 0.3); } - colorswatch.light overlay { + colorswatch.light { color: black; - outline-color: rgba(0, 0, 0, 0.5); } - colorswatch.light overlay:backdrop { - color: rgba(0, 0, 0, 0.3); } - colorswatch overlay, colorswatch overlay:selected { + outline-color: rgba(0, 0, 0, 0.5); border: 1px solid rgba(0, 0, 0, 0.3); } - colorswatch overlay:hover, colorswatch overlay:selected:hover { + colorswatch.light:hover { border-color: rgba(0, 0, 0, 0.5); } + colorswatch.light:backdrop { + color: rgba(0, 0, 0, 0.3); } + colorswatch overlay, colorswatch overlay:selected { + background: none; + border: none; } colorswatch#add-color-button { border-style: solid; border-width: 1px; -- 2.30.2